@black: #000000;
@light-black: lighten(@black, 22%);  // #383838

.lite-new-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;

  height: 100%;

  align-items: stretch;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  /* tricky, search is 200  increase this*/
  z-index: 210;

  background-color: fadeout(#000, 50%);
  color: #383838;

  line-height: 20px;

  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;

  > .wrapper {
    padding: 60px 0;

    overflow: auto;
  }

  > .wrapper > .box {
    width: 400px;

    margin: 0 auto;

    & > .header {
      position: relative;

      height: 50px;

      padding: 15px 60px;

      background-color: #4CBEF6;
      border-radius: 5px 5px 0 0;
      color: #FFF;

      font-size: 18px;
      line-height: 20px;
      text-align: center;

      .icon {
        color: fade(#FFF, 75%);

        cursor: pointer;

        &:hover {
          color: #FFF;
        }
      }

      .to-close {
        position: absolute;
        top: 15px;
        right: 15px;
        bottom: 15px;
      }
    }

    & > .content {
      padding: 30px 60px;

      background-color: #FFF;
      border-radius: 0 0 5px 5px;

      > div {
        margin-right: auto;
        margin-left: auto;
      }

      > div + div {
        margin-top: 15px;
      }

    }
  }

  &.is-warning {
    > .wrapper > .box > .header {
      background-color: #FEB715;
    }

    .button {
      background-color: #FEB715;

      &:hover {
        background-color: darken(#FEB715, 10%);
      }
    }
  }
}

// In & Out transition
.lite-new-modal.fade-enter .box {
  .translate(0, -40px);
}

.lite-new-modal.fade-enter-active .box {
  .translate(0, 0);
  .scale(1);
  .transition-transform(200ms ease-in-out);
}

.lite-new-modal.fade-leave .box {
  .transition(all 150ms ease-in-out);
}

.lite-new-modal.fade-leave-active .box {
  .opacity(0.01);
  .translate(0, -40px);
}
